<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue测试01</title>
        <style type="text/css">
            .green {
                background: yellow;
            }
        </style>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                <div v-bind:class="{ green: bgFlag }">
                    <p v-html="testText"></p>
                    <p>
                        {{ message }}
                    </p>
                    <p>
                        数据双向绑定: {{ msg }}
                    </p>
                </div>
                <p>
                    <input id="input" type="text" v-model="msg">
                </p>
                <p>
                    <label for="checkbox-input">改变背景颜色</label>
                    <input id="checkbox-input" type="checkbox" v-model="bgFlag">
                </p>
                <p>
                    <button id="getInput" @click="showContent">获取文本框的值</button>
                </p>
                <p>
                    <button @click="setValue">赋值</button>
                    <button @click="getValue">取值</button>
                </p>
            </div>

            <div v-for="(item, index) in testData">
                <p v-for="(value, key) in item">{{ index }} - {{ value }}</p>
            </div>
        </div>

        <script type="text/javascript">
            var data = {
                message: "Hello World !",
                testText: "老城区&nbsp&nbsp建筑&nbsp;&nbsp;拆迁",
                msg: "Some Word...",
                bgFlag: true,
                testData: [
                    {
                        key1:"value1",
                        key2:"value2",
                        key3:"value3",
                    },
                    {
                        key1:"value11",
                        key2:"value22",
                        key3:"value33",
                    }
                ]
            };
            var vm = new Vue({
                el: "#app",
                data: data,
                methods: {
                    showContent: function() {
                        alert(this.msg);
                    },
                    setValue: function() {
                        console.log(typeof this.testData);
                        this.testData = {
                            aaaa: 'bbbb'
                        }
                    },
                    getValue: function() {
                        console.log(typeof this.testData);
                        console.log(this.testData);
                        console.log(this.testData.aaaa);
                        console.log(this.testData[0].aaaa);
                    }
                }
            });
        </script>
    </body>
</html>
